<template>
  <div id="users">
    <el-card shadow="always">
      <!-- 条件查询表单 -->
      <el-form :inline="true" size="medium"  class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" plain @click="addUsers">添加用户</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" icon="el-icon-remove" plain @click="onDeleteUsers">批量删除</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="users"
                style="width: 100%"
                @selection-change="SelectedChange">
        <el-table-column
            type="selection">
        </el-table-column>
        <el-table-column label="用户ID" align="center" prop="userId" width="180"/>
        <el-table-column label="用户名" align="center" prop="userName"/>
        <el-table-column label="年龄" align="center" prop="age"/>
        <el-table-column label="性别" align="center" prop="gender"/>
        <el-table-column label="电话" align="center" prop="phone"/>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="onEditUser(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="onDeleteUsers(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--        对话框-->
    <el-dialog :title="titles" :visible.sync="dialogFormVisible">
      <el-form :model="user" :rules="formRules" ref="ruleForm">

        <!-- 用户名 -->
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="userName">
          <el-input v-model="user.userName" auto-complete="off"></el-input>
        </el-form-item>

        <!-- 年龄 -->
        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model="user.age" auto-complete="off" type="number"></el-input>
        </el-form-item>

        <!-- 性别 -->
        <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
          <el-select v-model="user.gender" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <!-- 电话 -->
        <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="user.phone" auto-complete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUser">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
// 引入相关 API
import userApi from "@/api/user"

export default {
  data() {
    return {
      users: [],                // 用户列表
      searchCriteria: {         // 查询条件
        userName: "",           // 用户名
        userType: "",           // 用户类型
        contactInfo: "",        // 联系方式
        age: "",                // 年龄
        gender: ""              // 性别
      },
      selectedId: [],           // 被选中的集合id
      selectedList: [],         // 被选中的集合
      currentPage: 1,           // 当前页码
      itemsPerPage: 5,          // 每页条数
      totalRecords: 100,        // 总记录数
      dialogFormVisible: false, // 对话框显示状态
      titles: "添加用户",       // 对话框标题
      user: {                   // 用户对象
        userId: null,           // 用户ID
        userName: "",           // 用户名
        userType: "",           // 用户类型
        age: null,              // 年龄
        gender: "",            // 性别
        phone: "",             // 电话
        contactInfo: ""         // 联系方式
      },
      formRules: {
        userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        userType: [{ required: true, message: "请输入用户类型", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
        contactInfo: [{ validator: this.ContactValidator, trigger: 'blur' }],
        phone: [{ required: true, message: "请输入电话", trigger: "blur" }]
      },
      formLabelWidth: "120px"  // 表单项的标签宽度
    };
  },
  created() {
    this.getAllUsers();       // 初始化查询数据
  },
  methods: {
    // 1. 查询所有学生
    async getAllUsers() {
      const { data: res } = await userApi.findAllUsers()
      console.log(res)
      if (res.code === 200) {
        this.users = res.data.list
      }
    },
    // 触发编辑用户
    onEditUser(index, row) {
      this.titles = "编辑用户";
      this.user = Object.assign({}, row);  // 使用 Object.assign 进行浅拷贝，避免直接引用
      this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.clearValidate(); // 清除校验
        }
      });
      this.dialogFormVisible = true;
    },
    //触发显示添加表单
    addUsers(){
      //先修改对话框标题
      this.titles='添加用户'
      //再清空数据
      this.user={}
      // 清除验证状态
      // 使用 $nextTick 确保 form 渲染后再清除验证
      this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.clearValidate(); // 清除校验
        }
      });
      //最后打开对话框
      this.dialogFormVisible=true

    },
    // 保存用户
    async saveUser() {
      // 表单验证
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          // 验证通过后，决定使用添加还是更新操作
          let url = "/user/add"; // 默认添加用户
          let method = "post";   // 默认 POST 方法
          if (this.user.userId) {
            // 如果已有用户ID，进行更新操作
            url = "/user/update";
            method = "put";
          }
          try {
            // 调用保存用户的 API
            const { data: res } = await userApi.saveUsers(url, this.user, method);
            if (res.code === 200) {
              // 成功保存
              this.$message({
                type: 'success',
                message: res.message,
                onClose: () => {
                  // 关闭对话框
                  this.dialogFormVisible = false;
                  // 保存后重新查询用户列表
                  this.getAllUsers();
                }
              });
            } else {
              // 错误提示
              this.$message({
                type: 'error',
                message: res.message
              });
            }
          } catch (error) {
            console.error("保存用户失败:", error);
          }
        } else {
          // 表单验证失败
          console.log("表单验证失败，请检查输入");
          return false;
        }
      });
    },
    ContactValidator(rule, value, callback){
      if (!value) {
        return callback(new Error('请输入联系方式'));
      }
      if (value && !/^1[3-9]\d{9}$/.test(value)) {
        callback(new Error("请输入有效的手机号码"));
      }
      callback(); // 验证通过
    },
    // 删除用户
    //删除被选中的用户集合
    onDeleteUsers(index, row) {
      this.selectedId = []
      console.log(row);
      if(row){  // 代表删除单个用户信息
        this.selectedId.push(row.userId)
      }else{
        this.selectedId = this.selectedList.map(m => m.userId)
      }
      this.$confirm(`是否真的要删除用户ID为${this.selectedId}的用户吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {       // 点击了"确定"按钮后执行
        let _this = this
        userApi.deleteUser(this.selectedId)
            .then(({data:res}) => {
              // 打印调试信息
             //console.log(res);
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: res.message,
                  onClose: () => {
                    // 重新所有信息数据
                    _this.getAllUsers()
                  }
                })
              } else {
                this.$message({
                  type: 'error',
                  message: res.message
                })
              }
            })
      }).catch(() => {     // 点击了"取消"按钮后执行
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 批量删除
    SelectedChange(val) {
      this.selectedList = val;
    },
    // // 分页
    // onPageSizeChange(newSize) {
    //   this.itemsPerPage = newSize;
    //   this.searchUsers();
    // },
    // onPageChange(page) {
    //   this.currentPage = page;
    //   this.searchUsers();
    // }
  },
};
</script>

<style>
#users {
  display: flex;
  justify-content: center;
}
.el-card {
  width: 90%;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
